<template>
  <div class="box" style="text-align: center;">
    <h2>id:{{ data.id }}</h2>
    <h3>{{data.title}}</h3>
    <h4>作者:{{data.author}}</h4>
    <h3>{{content}}</h3>
    <!-- <p>{{ye.time}}</p> -->
    <div class="yi" @click="fns()">上一页</div>
    <div class="er" @click="fn()">下一页</div>
  </div>
</template>
<style scoped src='@/assets/css/chakan.css'>
</style>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
const { proxy } = getCurrentInstance()
const id = ref(proxy.$store.state.ids)
console.log(id.value)
const data = ref([])
async function dataId () {
  const { data: res } = await proxy.$http.get('new_find?new_id=' + id.value + '')
  if (res.code !== 1) {
    proxy.$ElMessage({
      showClose: true,
      message: '请求失败',
      type: 'error'
    })
    return false
  } else {
    console.log(res.msg.id)
    data.value = res.msg
    content.value = res.msg.content.slice(0, 50)
    console.log(res.msg.content, 1321231321)
  }
}

// const yes = ref([])
const content = ref([])
async function ye (id) {
  const { data: res } = await proxy.$http.get('new_page?new_id=' + id + '&operate=next')
  console.log(res)
  data.value = res.msg
}
function fns () {
     if (id.value === 1) {
       alert('没有上一页')
       return
    }
     id.value--
     console.log(id.value)
     ye(id.value)
}
function fn () {
    if (id.value === 2) {
       alert('没有下一页')
       return
    }
     id.value++
     console.log(id.value)
     ye(id.value)
}
onMounted(() => {
  dataId()
  ye()
})
</script>
